<template>
  <div :class="classObject" class="message-container alert fixed-top w-50 mx-auto d-flex justify-content-between mt-2">
    <span>{{ message }}</span>
    <button type="button" class="btn-close" @click.prevent="close()"></button>
  </div>
</template>

<script lang='ts'>
import { defineComponent, PropType } from 'vue'

type MessageType = 'success' | 'error' | 'default';

export default defineComponent({
  props: {
    type: {
      type: String as PropType<MessageType>,
      default: 'default'
    },
    message: {
      type: String,
      default: ''
    },
    removeMessage: {
      type: Function,
      required: true
    }
  },
  setup (props) {
    const classObject = {
      'alert-primary': props.type === 'default',
      'alert-success': props.type === 'success',
      'alert-danger': props.type === 'error'
    }

    const close = () => {
      props.removeMessage()
    }

    return {
      classObject,
      close
    }
  }
})
</script>
